<template>
	<div class="login-container">

            <el-row style="margin-bottom: 15px;">
              <el-col :span="24">
                <div id="slideCaptcha"></div>
              </el-col>
            </el-row>



    <script>

      import { slideCaptcha } from '@/utils/slideCaptcha'

      export default {
        name: 'Login',
        data() {
          const validateUsername = (rule, value, callback) => {
            if (!validUsername(value)) {
              callback(new Error('请输入正确的账户名'))
            } else {
              callback()
            }
          }
          const validatePassword = (rule, value, callback) => {
            if (value.length < 6) {
              callback(new Error('密码不能少于6位数'))
            } else {
              callback()
            }
          }

          return {

            //忘记密码默认打开选项
            activeName: 'cellRest',

            //密码登陆表单校验
            loginRules: {
              accName: [
                { required: true, trigger: 'blur', validator: validateUsername }
              ],
              password: [
                { required: true, trigger: 'blur', message: '密码不能为空' }
              ],
              svrScope: [
                { required: true, trigger: 'blur', message: '所属子公司不能为空' }
              ]
            },

            //登陆读取标记
            loading: false,
            passwordType: 'password',
            redirect: undefined,

            //密码登陆滑动验证
            safeCode: false,
            //验证码登陆滑动验证
            safeCodeMobileLogin: false
          }
        },
        watch: {
          $route: {
            handler: function(route) {
              this.redirect = route.query && route.query.redirect
            },
            immediate: true
          }
        },

        mounted() {
          let safeCode = new Promise((resolve, reject) => {
            //
            let slide = this.slideCaptcha({
              id: 'slideCaptcha', // 初始化验证图片的区域，使用id命名
              spiritUrl: '',
              slideBgUrl: '',
              defaultPoint: {
                x: 0,
                y: 0
              },
              validCheck: process.env.VUE_APP_BASE_API + '/checkPoint',
              getResource: process.env.VUE_APP_BASE_API + '/getVerifyImg',
              width: 320,
              height: 140
            })

            resolve(slide)
          })

        },

        methods: {

          handleLogin() {
            if (this.safeCode.validation) {
              this.$refs.pwdLogin.validate(valid => {
                if (valid) {
                  this.loading = true
                  this.API.getPublicKey().then(data => {
                    if (data.status === 0) {
                      let crypt = new JSEncrypt({
                        default_key_size: 1024
                      })
                      crypt.setPublicKey(data.data)
                      let password = crypt.encrypt(this.loginForm.password)
                      //
                      this.$store
                          .dispatch('user/login', {
                            userCode: this.loginForm.accName,
                            // svrCode: 'ims',
                            loginType: '0',
                            svrScope: this.loginForm.svrScope,
                            svrCode: 'YHZX',
                            password: password
                          })
                          .then(data => {
                            if (data.status === 0) {
                              sessionInfoSet(data.data)
                              window.sessionStorage.setItem('token', data.data.token)
                              this.$store.dispatch('dictionary/getDic')
                              this.$router.push('/dashboard')
                            } else {
                              this.loading = false
                              this.safeCode.slideCaptchaReload()
                              return false
                            }
                          })
                          .catch(error => {
                            this.loading = false
                            this.safeCode.slideCaptchaReload()
                          })
                    }
                  })
                }
              })
            } else {
              this.LoginBtnActive = false
              this.$message({
                message: '滑动验证失败',
                type: 'warning',
                // duration: 1000,
                onClose: function() {
                  this.LoginBtnActive = true
                }.bind(this)
              })
              this.loading = false
              return
            }
          }

        }
      }
    </script>

<style lang="scss">
	/* 修复input 背景不协调 和光标变色 */
	/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

	//  980 540,
	// 600
	// rgba(255,255,255, .3)
	$bg: #283443;
	$light_gray: #fff;
	$cursor: #fff;



	// html,body{}
	.slide-captcha-active {
		-moz-user-select: none;
		-khtml-user-select: none;
		user-select: none;
	}

	#SlideCaptcha {
		// margin-bottom: 15px;
		.safecode-slidebar {
			-moz-user-select: none;
			-khtml-user-select: none;
			user-select: none;
			height: 30px;
			width: 100%;
			background: linear-gradient(#fff, #eee);
			border-radius: 30px;
			border: 1px solid #eee;
			text-align: center;
			line-height: 30px;
			//
			& > span {
				display: inline-block;

				&.safecode-slidebar-gif {
					background: url(../../assets/images/Captcha/arrows.gif) no-repeat;
					width: 23px;
					height: 12px;
				}
				&.safecode-slidebar-text {
					// background: url(../../assets/images/Captcha/arrows.gif) no-repeat;
					// width:23px;
					// height: 12px;
					// vertical-align: middle;
					font-size: 14px;
					padding: 0 10px;
					color: #bbb;
				}
			}
			#slideStatus {
				background: url(../../assets/images/Captcha/success_bg_text.png) no-repeat;
				width: 101px;
				height: 18px;
				vertical-align: middle;
			}
		}
		.safecode-slideBtn {
			height: 36px;
			width: 36px;
			display: block;
			position: absolute;
			top: -3px;
			cursor: all-scroll;
			// transform: translate(0, 0);
			border-radius: 50%;
			background: url(../../assets/images/Captcha/slider_icon.png) no-repeat;
			// &:hover {
			// 	& + .safecode-bg {
			// 		display: block;
			// 	}
			// }
		}
		.safecode-bg {
			display: none;
			bottom: 33px;
			position: absolute;
			background: #fff;
			&.show {
				display: block;
			}
			&.hide {
				opacity: 0;
				transition-delay: 4s;
				transition: opacity 1.5s ease-in-out;
			}
			#safecodeImagespirit {
				position: absolute;
				left: 0;
				// border: 2px solid #fff;
				box-sizing: border-box;
				// box-shadow: 0px 0px 4px #000;
			}
			//
			#reloadImag {
				background: url(../../assets/images/Captcha/refresh.png) no-repeat;
				position: absolute;
				width: 26px;
				height: 26px;
				right: 2px;
				top: 2px;
				z-index: 9999;
			}
			//
			.slide-success {
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				background: rgba(103, 194, 58, 0.5);
				opacity: 0;
				&.show {
					opacity: 1;
					transition: opacity 0.3s ease-in;
					font-size: 14px;
					color: #fff;
				}
			}
		}
		#safecodeImagebg {
			// filter: grayscale(.9);
		}
	}
</style>